// src/components/sidebar/SidebarSection.tsx

import LogoContainer from '@/components/sidebar/LogoContainer';
import ButtonsGroup from '@/components/sidebar/ButtonsGroup';
import SidebarMenu from '@/components/sidebar/SidebarMenu';
import { FaBars, FaChevronLeft, FaMoon, FaSun } from 'react-icons/fa';
import { useSidebarStore } from '@/store/sidebarStore';
import { useState, useEffect } from 'react';

const SidebarSection = () => {
  const { collapsed, toggleCollapsed } = useSidebarStore();
  const [isDark, setIsDark] = useState(false);

  useEffect(() => {
    const dark = localStorage.getItem('theme') === 'dark';
    setIsDark(dark);
    if (dark) {
      document.documentElement.classList.add('dark');
    } else {
      document.documentElement.classList.remove('dark');
    }
  }, []);

  const toggleDarkMode = () => {
    setIsDark((prev) => {
      const next = !prev;
      if (next) {
        document.documentElement.classList.add('dark');
        localStorage.setItem('theme', 'dark');
      } else {
        document.documentElement.classList.remove('dark');
        localStorage.setItem('theme', 'light');
      }
      return next;
    });
  };

  return (
    <>
      <div className="relative">
        <aside
          className={`hidden md:flex flex-col h-full border-r border-gray-200 dark:border-slate-800 bg-white dark:bg-slate-900 shadow-xl transition-all duration-300 ease-in-out z-20 overflow-y-auto ${collapsed ? 'w-20' : 'w-64'}`}
        >
          <div className="flex flex-col min-h-full">
            <LogoContainer collapsed={collapsed} />
            <ButtonsGroup collapsed={collapsed} />
            <SidebarMenu collapsed={collapsed} />
            <div className="flex justify-center py-4 mt-auto">
              <button
                onClick={toggleDarkMode}
                className="flex items-center gap-2 px-4 py-2 rounded-xl bg-slate-100 dark:bg-slate-800 text-gray-700 dark:text-gray-200 hover:bg-blue-100 dark:hover:bg-slate-700 shadow transition-all duration-200"
                aria-label="Toggle dark mode"
                type="button"
              >
                {isDark ? <FaSun className="w-5 h-5 text-yellow-400" /> : <FaMoon className="w-5 h-5 text-blue-500" />}
                {!collapsed && <span className="text-sm font-medium hidden md:inline">{isDark ? 'Light Mode' : 'Dark Mode'}</span>}
              </button>
            </div>
          </div>
        </aside>
        <button
          className={`hidden md:flex items-center justify-center absolute top-0 right-0 h-full w-6 z-30
            bg-white dark:bg-slate-900 border-r border-gray-200 dark:border-slate-800 text-gray-600 dark:text-gray-300
            transition-all duration-200 ease-in-out
            hover:bg-blue-50 dark:hover:bg-slate-800 hover:text-blue-600 dark:hover:text-blue-300 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2`}
          style={{ transform: 'translateX(100%)' }}
          onClick={toggleCollapsed}
          aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
          type="button"
        >
          <span className="mx-auto text-sm transition-all duration-200">
            {collapsed ? <FaBars /> : <FaChevronLeft />}
          </span>
        </button>
      </div>
      <nav className="fixed bottom-0 left-0 right-0 z-30 bg-white dark:bg-slate-900 border-t border-gray-200 dark:border-slate-800 shadow-lg flex md:hidden justify-between items-center px-1 py-1">
        <div className="flex flex-1 justify-around items-center">
          <SidebarMenu mobile />
          <ButtonsGroup mobile />
        </div>
        <button
          onClick={toggleDarkMode}
          className="ml-1 flex items-center justify-center w-9 h-9 rounded-xl bg-slate-100 dark:bg-slate-800 text-gray-700 dark:text-gray-200 hover:bg-blue-100 dark:hover:bg-slate-700 shadow transition-all duration-200 flex-shrink-0"
          aria-label="Toggle dark mode"
          type="button"
        >
          {isDark ? <FaSun className="w-4 h-4 text-yellow-400" /> : <FaMoon className="w-4 h-4 text-blue-500" />}
        </button>
      </nav>
    </>
  );
};

export default SidebarSection;